<template>
    <div ref="select" class="select pointer" @click="show">
      <img :src="selectL" alt="">
      <p class="font-lan-m">{{ modelValue ? getLabel(modelValue) : placeholder }}</p>
      <div class="d-flex ai-center">
        <img :class="['selectImg', showSelect ? 'rotate' : '']" :src="selectR" alt="">
      </div>
      <div v-show="showSelect" class="selectPopper" ref="selectPopper" >
        <div class="selectDropDown" @click.stop="">
          <div>
            <div class="font-lan">边界线</div>
            <el-row :gutter="16">
              <el-col :span="14">
                <div class="d-flex ai-center jc-between">
                  <p class="font-lan-gray-60-m">宽度：</p>
                  <el-input-number style="width: 80px;" v-model="storage.state.coverageData.boundary.weight" size="small" :min="1" :max="10" @change="weightChange" />
                </div>
              </el-col>
              <el-col :span="10" >
                <div class="d-flex ai-center jc-between">
                  <p class="font-lan-m">边框颜色：</p>
                  <el-color-picker v-model="storage.state.coverageData.boundary.color" show-alpha size="small" @change="colorChange($event)" @active-change="activeChange"/>
                </div>
              </el-col>
            </el-row>
          </div>
          <!-- <div v-for="(item) in options" :key="item[value]"
            :class="['mb-1', 'selectItem', modelValue == item[value] ? 'active' : '']" @click="clickItem(item)">
            <div class="d-flex jc-between ai-center">
              <p class="font-lan-m">{{ item[label] }}</p>
              <img v-if="modelValue == item[value]" :src="selectL" class="rotate" alt="">
            </div>
          </div> -->
        </div>
        <span class="popperArrow"></span>
      </div>
    </div>
  </template>
    
  <script lang="ts">
  import {
    ref,
    reactive,
    onMounted,
    onBeforeMount,
    onBeforeUnmount,
    defineComponent,
  } from "vue";
  import mapControler from "@/components/mapContainer/mapControler";
  import storage from '@/store'
  import {
    editColour
  } from "@/public/request/http";

  // 声明类型
  const PropsType = {
    placeholder: {
      type: String,
      default: '',
      require: true
    },
    options: {
      type: Array,
      default: [],
      require: true
    },
    modelValue: {
      type: String,
      default: null,
      require: true
    },
    label: {
      type: String,
      default: 'label',
    },
    value: {
      type: String,
      default: 'value',
    },
    clear:{
      type:Boolean,
      default: false
    }
  } as const
  
  // 声明类型
  export default defineComponent({
    props: PropsType,
    components: {},
    setup(props, context) {
      //变量
      const select = ref(null)
      const selectPopper = ref(null)
      const selectData = reactive({
        top: 0,
        left: 0,
        minWidth: 0
      })
      const selectL = require("@/assets/img/select-left.png");
      const selectR = require("@/assets/img/select-right.png");
      const clearIcon = require("@/assets/img/close-circle.png");
      const showSelect = ref(false)
      const color = ref('#ff0000')

      const show = () => {
        let data = select.value.getBoundingClientRect()
        selectData.top = data.top + data.height + 10
        selectData.left = data.left
        selectData.minWidth = data.width
        showSelect.value = !showSelect.value
      }
  
      const clickClear = () => {
        context.emit('update:modelValue', null)
        context.emit('change', null)
      }
  
      const clickItem = (val) => {
        context.emit('update:modelValue', val[props.value])
        context.emit('change', val[props.value])
      }
  
      const getLabel = (val) => {
        return props.options.find(item => item[props.value] == val)[props.label]
      }
  
      const closeSelectHandler = (e) => {
        // 获取DOM元素的引用
        if(e.target.id == 'select') return
        if (select.value && select.value.contains(e.target)) {
          return;
        }
        showSelect.value = false;
      };
  
      onBeforeMount(() => {
        // 在DOM元素渲染之前开始监听mousedown事件
        // document.body.addEventListener("mousedown", closeSelectHandler);
      });
  
      onBeforeUnmount(() => {
        // 在Vue文件销毁的时候移除这个事件
        // document.body.removeEventListener("mousedown", closeSelectHandler);
      });
  
      onMounted(() => {
        //
  
      })

      const colorChange = async (e)=>{
        await storage.commit('changeBoundary',{
          color:e,
          weight:storage.state.coverageData.boundary.weight,
          id:storage.state.coverageData.boundary.id
        })
        setColor()
      }

      const activeChange = (e)=>{
        mapControler.drawBoleLine(e)
      }

      const weightChange = async (e)=>{
        await storage.commit('changeBoundary',{
          color:storage.state.coverageData.boundary.color,
          weight:e,
          id:storage.state.coverageData.boundary.id
        })
        mapControler.drawBoleLine()
        setColor()
      }

      const setColor = async ()=>{
        let data = {
            coding:storage.state.coverageData.boundary.color,
            weight:storage.state.coverageData.boundary.weight,
            id:storage.state.coverageData.boundary.id
          }
          console.log(data);
          
        try {
          
          let res = await editColour(data)
        } catch (error) {
          return
        }
      }
  
      // return
      return {
        select,
        selectPopper,
        selectL,
        selectR,
        clearIcon,
        showSelect,
        selectData,
        clickClear,
        getLabel,
        show,
        clickItem,
        storage,
        colorChange,
        activeChange,
        weightChange
      };
    },
  
  });
  </script>
    
  <style lang="scss" scoped>
  @import "@/assets/scss/index.scss";
  
  .select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 4px 8px;
    background: linear-gradient(90deg, rgba(82, 147, 204, 0) 0%, #5293CC 47%, rgba(82, 147, 204, 0) 100%);
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid;
    border-image: linear-gradient(90deg, rgba(153, 207, 255, 0), rgba(153, 207, 255, 1), rgba(153, 207, 255, 0)) 1 1;
  
    .title {
      font-size: 14px;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 20px;
    }
  
    .clearImg{
      width: 16px;
      height: 16px;
    }
    .selectImg {
      transition: transform 0.3s;
      transform: rotate(0);
    }
  
    .rotate {
      transform: rotate(-180deg);
    }
  
    --inset: v-bind(`${selectData.top}px auto auto ${selectData.left}px`);
    --min-width: v-bind(`${selectData.minWidth}px`);
    .selectPopper {
      position: fixed;
      inset: var(--inset);
      z-index: 2000;
      cursor: default;
      min-width: 300px;
      color: #fff;
      background: rgba(20, 69, 102, 1);
      border-radius: 4px;
      opacity: 1;
      box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
      .selectDropDown {
        min-width: var(--min-width);
        padding: 8px 16px;
  
        .selectItem {
          padding: 4px 8px;
        }
  
        .selectItem:hover {
          background: linear-gradient(270deg, #529ACC00 0%, #8AC1E5 100%);
        }
  
        .active {
          background: linear-gradient(270deg, #ccb17a00 0%, #E5D38A 100%);
          opacity: 1;
        }
      }
  
      .popperArrow {
        position: absolute;
        left: 50%;
        top: -5px;
        transform: translateX(-50%) rotate(45deg);
        width: 10px;
        height: 10px;
        background: rgba(60 ,114 ,151, 1);
        z-index: -1;
      }
    }
  }</style>
    